<template>
	<view class="dock-container">
		<!-- 基座显示界面 -->
		<view class="dock-screen">
			<!-- 设备状态 -->
			<view class="status-section">
				<view class="status-icon" :class="{ connected: isConnected }">
					<u-icon :name="isConnected ? 'checkmark-circle-fill' : 'close-circle'" 
					        :color="isConnected ? '#4cd964' : '#dd524d'" 
					        size="60"></u-icon>
				</view>
				<text class="status-text">{{ isConnected ? '设备已连接' : '等待设备连接' }}</text>
			</view>
			
			<!-- 验证码显示区域 -->
			<view v-if="authCode" class="code-display-section">
				<view class="code-label">验证码</view>
				<view class="code-value">{{ authCode }}</view>
				<view class="code-phone">手机号：{{ phone }}</view>
				<view class="code-time">有效期：{{ countdown }}秒</view>
				
				<!-- 登录按钮 -->
				<view class="login-section">
					<u-button 
						type="primary" 
						:custom-style="{ width: '100%', height: '88rpx', borderRadius: '44rpx' }"
						@click="doLogin"
						:loading="isLogging"
					>
						{{ isLogging ? '登录中...' : '使用验证码登录' }}
					</u-button>
				</view>
			</view>
			
			<!-- 等待连接提示 -->
			<view v-else class="waiting-section">
				<view class="waiting-icon">
					<u-icon name="phone-fill" color="#999" size="80"></u-icon>
				</view>
				<text class="waiting-text">请将手机连接到基座</text>
				<text class="waiting-tip">连接后将自动获取验证码</text>
			</view>
			
			<!-- 设备信息 -->
			<view v-if="deviceInfo" class="device-info-section">
				<view class="info-item">
					<text class="info-label">设备名称：</text>
					<text class="info-value">{{ deviceInfo.deviceName }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">设备ID：</text>
					<text class="info-value">{{ deviceInfo.deviceId }}</text>
				</view>
				<view class="info-item" v-if="deviceInfo.phone">
					<text class="info-label">绑定手机：</text>
					<text class="info-value">{{ deviceInfo.phone }}</text>
				</view>
			</view>
		</view>
		
			<!-- 控制按钮（可选，用于测试） -->
			<view class="control-section" v-if="showControls || !isConnected">
				<u-button type="primary" @click="manualConnect" :loading="isConnecting">
					{{ isConnecting ? '连接中...' : '手动连接' }}
				</u-button>
				<u-button 
					v-if="!phone"
					type="success" 
					@click="showPhoneInput = true"
					style="margin-top: 20rpx;"
				>
					输入手机号
				</u-button>
				<u-button 
					v-if="isConnected"
					type="warning" 
					@click="clearCode" 
					style="margin-top: 20rpx;"
				>
					清除验证码
				</u-button>
			</view>
			
			<!-- 手机号输入弹窗 -->
			<u-modal 
				v-model="showPhoneInput" 
				title="输入手机号"
				:show-cancel-button="true"
				@confirm="confirmPhone"
			>
				<view class="phone-input-dialog">
					<u-input 
						v-model="inputPhone" 
						placeholder="请输入手机号" 
						type="number"
						maxlength="11"
					></u-input>
				</view>
			</u-modal>
	</view>
</template>

<script>
import $api from '../../api/user.js';

export default {
	data() {
		return {
			deviceId: '', // 设备ID（可以从设备硬件获取或配置）
			phone: '', // 绑定的手机号
			isConnected: false,
			isConnecting: false,
			authCode: '',
			countdown: 300, // 验证码倒计时（5分钟）
			countdownTimer: null,
			deviceInfo: null,
			checkInterval: null, // 设备检测轮询
			showControls: false, // 是否显示控制按钮（开发测试用）
			showPhoneInput: false, // 是否显示手机号输入弹窗
			inputPhone: '', // 输入的手机号
			isLogging: false // 是否正在登录
		}
	},
	onLoad(options) {
		// 从参数或配置获取设备ID
		this.deviceId = options.deviceId || this.getDeviceId();
		this.phone = options.phone || uni.getStorageSync('devicePhone') || '';
		
		// 如果是开发环境，显示控制按钮
		// #ifdef H5 || MP-WEIXIN
		if (process.env.NODE_ENV === 'development') {
			this.showControls = true;
		}
		// #endif
		
		// 如果没有手机号，显示输入框
		if (!this.phone) {
			this.showPhoneInput = true;
		}
		
		// 启动自动检测
		this.startAutoCheck();
		
		// 尝试立即连接
		if (this.phone) {
			this.connectDevice();
		}
	},
	onUnload() {
		// 清理定时器
		this.stopAutoCheck();
		this.clearCountdown();
	},
	methods: {
		// 获取设备ID（可以从硬件获取或本地存储）
		getDeviceId() {
			// 优先从本地存储获取
			let savedDeviceId = uni.getStorageSync('deviceId');
			if (savedDeviceId) {
				return savedDeviceId;
			}
			
			// 生成或从硬件获取设备ID
			// 实际应用中，这里应该从硬件读取设备序列号
			// #ifdef APP-PLUS
			// 可以从设备信息获取
			// const deviceInfo = plus.device;
			// return deviceInfo.uuid || 'DEVICE_' + Date.now();
			// #endif
			
			// 默认使用时间戳生成（仅用于测试）
			return 'DOCK_' + Date.now();
		},
		
		// 启动自动检测
		startAutoCheck() {
			// 每5秒检测一次设备连接
			this.checkInterval = setInterval(() => {
				if (!this.isConnected) {
					this.connectDevice();
				}
			}, 5000);
		},
		
		// 停止自动检测
		stopAutoCheck() {
			if (this.checkInterval) {
				clearInterval(this.checkInterval);
				this.checkInterval = null;
			}
		},
		
		// 连接设备并获取验证码
		async connectDevice() {
			if (this.isConnecting || !this.deviceId) {
				return;
			}
			
			this.isConnecting = true;
			
			try {
				const res = await $api.deviceConnect({
					deviceId: this.deviceId,
					deviceName: '手机基座',
					deviceType: 'dock',
					phone: this.phone || undefined
				});
				
				console.log('基座连接响应', res);
				
				if (res.data && res.data.code === 200) {
					const data = res.data.data;
					
					if (data.success) {
						this.isConnected = true;
						this.phone = data.phone || this.phone;
						
						// 显示验证码（基座设备始终返回验证码）
						if (data.code) {
							this.authCode = data.code;
							this.startCountdown();
							console.log('基座收到验证码：', data.code);
							
							// 保存验证码到本地（用于备用）
							uni.setStorageSync('lastAuthCode', {
								code: data.code,
								phone: this.phone,
								timestamp: Date.now()
							});
						} else {
							// 尝试从本地存储获取
							this.tryGetCodeFromStorage();
						}
						
						// 保存设备信息
						if (data.deviceId) {
							uni.setStorageSync('deviceId', data.deviceId);
						}
						
						// 加载设备信息
						this.loadDeviceInfo();
						
						// 停止自动检测
						this.stopAutoCheck();
						
					} else {
						// 需要绑定手机号
						if (data.needBind) {
							console.log('设备需要绑定手机号');
							// 尝试使用备用方案：从手机端获取验证码
							this.tryGetCodeFromPhone();
						}
					}
				} else {
					console.error('基座连接失败：', res.data?.message);
					// 尝试备用方案
					this.tryGetCodeFromPhone();
				}
			} catch (err) {
				console.error('基座连接失败', err);
				// 连接失败时，尝试备用方案
				if (err.errMsg && err.errMsg.includes('Failed to connect')) {
					console.log('无法连接到服务器，尝试备用方案...');
					// 尝试从手机端或本地存储获取验证码
					this.tryGetCodeFromPhone();
				} else {
					console.error('连接错误：', err);
				}
			} finally {
				this.isConnecting = false;
			}
		},
		
		// 备用方案：从手机端获取验证码
		async tryGetCodeFromPhone() {
			// 如果无法连接后端，尝试从手机端获取验证码
			// 方法1：从本地存储获取（如果手机端已保存）
			this.tryGetCodeFromStorage();
			
			// 方法2：直接调用获取验证码接口（绕过设备连接）
			if (this.phone && this.phone.match(/^1[3-9]\d{9}$/)) {
				try {
					const res = await $api.getAuthCode({
						telephone: this.phone
					});
					
					if (res.data && res.data.code === 200) {
						const data = res.data.data;
						if (data && data.code) {
							this.authCode = data.code;
							this.startCountdown();
							this.isConnected = true;
							console.log('基座通过备用方案获取验证码：', data.code);
							
							// 保存验证码
							uni.setStorageSync('lastAuthCode', {
								code: data.code,
								phone: this.phone,
								timestamp: Date.now()
							});
							
							// 停止自动检测
							this.stopAutoCheck();
						}
					}
				} catch (err) {
					console.error('备用方案也失败：', err);
				}
			}
		},
		
		// 尝试从本地存储获取验证码（如果手机端已保存）
		tryGetCodeFromStorage() {
			// 从本地存储读取验证码（如果手机端已保存）
			const savedCode = uni.getStorageSync('lastAuthCode');
			if (savedCode && savedCode.code && savedCode.phone === this.phone) {
				// 检查是否过期（5分钟内）
				const now = Date.now();
				if (now - savedCode.timestamp < 300000) { // 5分钟
					this.authCode = savedCode.code;
					this.startCountdown();
					console.log('从本地存储获取验证码：', savedCode.code);
				}
			}
		},
		
		// 手动连接（测试用）
		manualConnect() {
			this.connectDevice();
		},
		
		// 清除验证码
		clearCode() {
			this.authCode = '';
			this.clearCountdown();
			this.isConnected = false;
			// 重新启动自动检测
			this.startAutoCheck();
		},
		
		// 加载设备信息
		async loadDeviceInfo() {
			if (!this.deviceId) return;
			
			try {
				const res = await $api.getDeviceInfo({
					deviceId: this.deviceId
				});
				
				if (res.data && res.data.code === 200) {
					this.deviceInfo = res.data.data;
				}
			} catch (err) {
				console.error('加载设备信息失败', err);
			}
		},
		
		// 开始倒计时
		startCountdown() {
			this.clearCountdown();
			this.countdown = 300; // 5分钟
			
			this.countdownTimer = setInterval(() => {
				this.countdown--;
				if (this.countdown <= 0) {
					this.clearCode();
				}
			}, 1000);
		},
		
		// 清除倒计时
		clearCountdown() {
			if (this.countdownTimer) {
				clearInterval(this.countdownTimer);
				this.countdownTimer = null;
			}
		},
		
		// 确认输入手机号
		confirmPhone() {
			if (!this.inputPhone || !this.inputPhone.match(/^1[3-9]\d{9}$/)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			
			this.phone = this.inputPhone;
			this.showPhoneInput = false;
			this.inputPhone = '';
			
			// 保存手机号
			uni.setStorageSync('devicePhone', this.phone);
			
			// 尝试连接
			this.connectDevice();
		},
		
		// 使用验证码登录
		async doLogin() {
			if (!this.phone || !this.authCode) {
				uni.showToast({
					title: '手机号或验证码不能为空',
					icon: 'none'
				});
				return;
			}
			
			if (this.isLogging) {
				return;
			}
			
			this.isLogging = true;
			
			try {
				// 调用登录接口（验证码登录）
				const res = await $api.Login({
					phone: this.phone,
					authCode: this.authCode
				});
				
				console.log('基座登录响应', res);
				
				if (res.data && res.data.code === 200) {
					const userData = res.data.data;
					
					// 保存token和用户信息
					if (userData.token) {
						uni.setStorageSync('token', userData.token);
					}
					if (userData.user) {
						uni.setStorageSync('user', userData.user);
					}
					
					uni.showToast({
						title: '登录成功',
						icon: 'success',
						duration: 2000
					});
					
					// 延迟跳转到首页
					setTimeout(() => {
						// 关闭基座页面，跳转到首页
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}, 2000);
					
				} else {
					uni.showToast({
						title: res.data?.message || '登录失败',
						icon: 'none'
					});
				}
			} catch (err) {
				console.error('基座登录失败', err);
				uni.showToast({
					title: err.message || '登录失败，请重试',
					icon: 'none'
				});
			} finally {
				this.isLogging = false;
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.dock-container {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
}

.dock-screen {
	width: 100%;
	max-width: 600rpx;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 30rpx;
	padding: 60rpx 40rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
}

.status-section {
	text-align: center;
	margin-bottom: 60rpx;
	
	.status-icon {
		margin-bottom: 20rpx;
	}
	
	.status-text {
		display: block;
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}
}

.code-display-section {
	text-align: center;
	margin-bottom: 40rpx;
	
	.code-label {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 30rpx;
	}
	
	.code-value {
		font-size: 120rpx;
		font-weight: bold;
		color: #ffda33;
		letter-spacing: 20rpx;
		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
		margin-bottom: 30rpx;
		background: linear-gradient(135deg, #ffda33 0%, #ffb347 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}
	
	.code-phone {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}
	
	.code-time {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 20rpx;
	}
	
.login-section {
	margin-top: 40rpx;
	padding: 0 20rpx;
}
	
.login-section {
	margin-top: 40rpx;
	padding: 0 20rpx;
}
}

.waiting-section {
	text-align: center;
	padding: 60rpx 0;
	
	.waiting-icon {
		margin-bottom: 30rpx;
		opacity: 0.5;
	}
	
	.waiting-text {
		display: block;
		font-size: 32rpx;
		color: #666;
		margin-bottom: 20rpx;
	}
	
	.waiting-tip {
		display: block;
		font-size: 24rpx;
		color: #999;
	}
}

.device-info-section {
	margin-top: 40rpx;
	padding-top: 40rpx;
	border-top: 1rpx solid #eee;
	
	.info-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		
		.info-label {
			color: #666;
		}
		
		.info-value {
			color: #333;
			font-weight: 500;
		}
	}
}

.control-section {
	width: 100%;
	max-width: 600rpx;
	margin-top: 40rpx;
}

.phone-input-dialog {
	padding: 20rpx;
}
</style>

